<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" import="java.util.Date"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String basePath = getServletContext().getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Subjects</title>
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/teacher_style.css">
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/moment.min.js"></script>
</head>
<body>
	<div id="header"></div>
	<!-- header -->

	<div class="container">
		<div class="main-left">
			<div class="main-right">
				<div class="main">
					<div class="nav">
						<ul>
							<li><a id="tab" href="#">Classes</a> <span
								class="courses-button">▼</span>
								<ul class="courses-dd" id="tab">
									<c:forEach items="${teacher.subjects}" var="subject">
										<li class="course_li"><a class="course"
												href="../teacher/groupsservlet?subject=${subject.id}"> ${subject.name } </a></li>
									</c:forEach>
									
								</ul></li>
							<li><a href="../teacher">Schedule</a>
							</li>
							<li><a href="../teacher/help">Help</a>
							</li>
						</ul>
						<div class="usernav">
							<a href="#" id="account-drop" style="min-width: 110px;"> <img
								src="../images/icons/user2-16.png" alt=" " />${teacher.name } <span
								id="account-drop-down" style="float: right;">▼</span> </a>
							<ul id="drop-down">
								<li><a href="#" id="change-password">Change password</a></li>
								<li><a href="#" id="change-email">Change email</a></li>
								<li><a href="#" id="logout">Logout</a></li>
							</ul>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
					<!-- nav end-->

					<div class="content">
						<div class="offset">
							<div class="left">
								<table class="crumbs">
									<tbody>
										<tr>
											<!-- change java code here -->
											<td class="first"><a href="#"> Classes </a></td>
											<td>→</td>
											<td class="last"><em>Manage classes</em>
											</td>
										</tr>
									</tbody>
								</table>
								<div class="page-left">
									<h2 class="">Lecture times</h2>
                                <div class="lecture-header">
                                    <div class="sort">
                                        Sort by:
                                        <select id="sort">
                                            <option value="room">Room</option>
                                            <option value="course_name">Course name</option>
                                            <option value="teacher_name">Teacher name</option>
                                            <option value="start">Start time</option>
                                            <option value="end">End time</option>
                                        </select>
                                    </div>
                                    <button class="btn-refresh" id="sort-refresh">
                                        <span>
                                            refresh
                                        </span>
                                    </button>
                                </div>
                                <table class="lecture">
                                    <thead>
                                    <tr>
                                        <th>
                                            Room
                                        </th>
                                        <th>
                                            Course name
                                        </th>
                                        <th>
                                            Teacher name
                                        </th>
                                        <th>
                                            Start time
                                        </th>
                                        <th>
                                            End time
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody id="list">
                                    <tr>
                                        <td>
                                            A2
                                        </td>
                                        <td>
                                            CSS123 Software Engineering
                                        </td>
                                        <td>
                                            Adilbek Zhaxalykov
                                        </td>
                                        <td>
                                            11:00
                                        </td>
                                        <td>
                                            13:00
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            A2
                                        </td>
                                        <td>
                                            CSS123 Software Engineering
                                        </td>
                                        <td>
                                            Adilbek Zhaxalykov
                                        </td>
                                        <td>
                                            11:00
                                        </td>
                                        <td>
                                            13:00
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            A2
                                        </td>
                                        <td>
                                            CSS123 Software Engineering
                                        </td>
                                        <td>
                                            Adilbek Zhaxalykov
                                        </td>
                                        <td>
                                            11:00
                                        </td>
                                        <td>
                                            13:00
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            A2
                                        </td>
                                        <td>
                                            CSS123 Software Engineering
                                        </td>
                                        <td>
                                            Adilbek Zhaxalykov
                                        </td>
                                        <td>
                                            11:00
                                        </td>
                                        <td>
                                            13:00
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
									<div class="clear"></div>
								</div>
							</div>
						</div>
						<div class="right">
							<div class="right-fade">
								<div class="right-time">
									<span class="time round-3" id="time"></span>
								</div>
								<div class="right-classes">
									<h2>Your classes</h2>
									<ul class="courses_ul">
										<c:forEach items="${teacher.subjects }" var="subject">
											<li class="course_li"><a class="course"
												href="../teacher/groupsservlet?subject=${subject.id}"> ${subject.name } </a></li>
										</c:forEach>
									</ul>
									<div class="clear"></div>
									
									<div class="clear"></div>
								</div>
								<div class="clear"></div>
								<div class="right-extras">
									<h2>Support</h2>
								</div>
							</div>
						</div>
						<div class="clear"></div>
					</div>

				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="shadow"></div>
		<div class="pass-popup">
			<div class="pass-item">
				<label for="oldpass">Old password</label> <input type="password"
					id="oldpass" name="oldpass" class="input" />
			</div>
			<div class="pass-item">
				<label for="newpass">New password</label> <input type="password"
					id="newpass" name="newpass" class="input" />
			</div>
			<div class="pass-item">
				<label for="confpass">Confirm password</label> <input
					type="password" id="confpass" name="confpass" class="input" />
			</div>
			<div class="pass-options">
				<button type="submit" class="btn-green" id="pass-submit">
					<span> Change password </span>
				</button>
				or <a href="#" id="pass-cancel">Cancel</a>
			</div>
		</div>
		<div class="email-popup">
			<div class="email-item">
				<label for="email">New email</label> <input type="email" id="email"
					name="email" class="input" />
			</div>
			<div class="email-options">
				<button type="submit" class="btn-green" id="email-submit">
					<span> Change email </span>
				</button>
				or <a href="#" id="email-cancel">Cancel</a>
			</div>
		</div>
	</div>
	<!-- container end-->

	<div id="footer"></div>
	<script>
		$(document).ready(function() {
			var t = moment().format("MMMM Do YYYY, h:mma");
            $("#time").text(t);
			$(".courses-button").click(function() {
				$("ul .courses-dd").css("visibility", "visible");
			});
			$("#tab").click(function() {
				$("ul .courses-dd").css("visibility", "visible");
			});
			$("ul .courses-dd").mouseleave(function() {
				$(this).css("visibility", "hidden");
			});
			$("#account-drop-down").click(function() {
				$("#drop-down").css("display", "block");
			});
			$("#account-drop").click(function() {
				$("#drop-down").css("display", "block");
			});
			$("#drop-down").mouseleave(function() {
				$(this).css("display", "none");
			});
			
			$("#sort-refresh").click(function(ev) {
				ev.preventDefault();
				var sortby = $("#sort").val();
				$.ajax({
					url : "../teacher",
					type : "POST",
					data : "command=sort&sortby=" + sortby,
					datatype : "json",
					success : function(message) {
						alert(message);
					}
				});
			});
			

			$("#change-password").click(function(ev) {
				ev.preventDefault();
				var popup = $(".pass-popup");
				var height = $(window).height();
				var width = $(window).width();
				var popHeight = popup.height();
				var popWidth = popup.width();
				$(".shadow").css("display", "block");
				popup.css({
					"display" : "block",
					"left" : (width - popWidth) / 2,
					"top" : Math.max((height - popHeight) / 3, 20),
					"position" : "absolute"
				});
			});

			$("#pass-submit").click(function(ev) {
				ev.preventDefault();
				var oldpass = $("input[name=oldpass]").val();
				var newpass = $("input[name=newpass]").val();
				var confpass = $("input[name=confpass]").val();
				$.ajax({
					url : "../teacher",
					type : "POST",
					data : "command=changepassword&current=" + oldpass + "&new=" + newpass + "&conf=" + confpass,
					success : function(message) {
						if (message == 0) {
							$(".pass-popup").css("display", "none");
							$(".shadow").css("display", "none");
						} else if (message == 1) {
							alert("incorrect old pasword");
						} else {
							alert("mismatch password new password");
						}
					}
				});
				$(".pass-popup").css("display", "none");
				$(".shadow").css("display", "none");
			});

			$("#pass-cancel").click(function(ev) {
				ev.preventDefault();
				$(".pass-popup").css("display", "none");
				$(".shadow").css("display", "none");
			});

			$("#change-email").click(function(ev) {
				ev.preventDefault();
				var popup = $(".email-popup");
				var height = $(window).height();
				var width = $(window).width();
				var popHeight = popup.height();
				var popWidth = popup.width();
				$(".shadow").css("display", "block");
				popup.css({
					"display" : "block",
					"left" : (width - popWidth) / 2,
					"top" : Math.max((height - popHeight) / 3, 20),
					"position" : "absolute"
				});
			});

			$("#email-submit").click(function(ev) {
				ev.preventDefault();
				var email = $("input[name=email]").val();
				$.ajax({
					url : "../teacher",
					type : "POST",
					data : "command=changeemail&email=" + email,
					success : function(message) {
						if (message == 0) {
							$(".email-popup").css("display", "none");
							$(".shadow").css("display", "none");
						} else {
							alert("can not change email");
						}
					}
				});
			});

			$("#email-cancel").click(function(ev) {
				ev.preventDefault();
				$(".email-popup").css("display", "none");
				$(".shadow").css("display", "none");
			});

			$("#logout").click(function(ev) {
				ev.preventDefault();
				$.ajax({
					url : "../teacher",
					type : "POST",
					data : "command=logout",
					success : function(message) {
						if (message == 0) {
							window.location = "../teacher/login";
						}
					}
				});
			});

		});
	</script>
</body>
</html>